﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>test</title>
    <link href="css/flexible.css" rel="stylesheet">
    <link href="css/bootstrap.css"/>
    <link href="css/bootstrap-theme.css"/>
</head>
<body>
<div>
    Vue入门练习1
    <div id="app">{{message}}</div>
    <br />
    响应式绑定数据
    <div id="app-2">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
        <p v-if="isShow">用v-if判断是否显示</p>
    </div>
    <br />
    条件与循环
    <div id="app-3">
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ul>
    </div>
    <br/>
    处理用户输入
    <div id="app-4">
        <p>{{message}}</p>
        <button v-on:click="method">逆转消息</button>
    </div>
    <br/>
    使用Vue的双向绑定
    <div id="app-5">
        <p>{{msg}}</p>
        <input v-model="msg"/>
    </div>
    <br/>
    复习v-for
    <div id="app-6">
        <ul>
            <li v-for="obj in lis">
                {{obj.text}}
            </li>
        </ul>
    </div>
</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/flexible.js"></script>
<script src="js/vue-2.5.16.js"></script>

<script>
    //console.log(new Vue());
    var app = new Vue({
        el:'#app',
        data:{
            message:'Hello World-Vue的声明式渲染'
        }
    });

    var app2 = new Vue({
        el:'#app-2',
        data:{
            message:'页面加载于:'+new Date().toLocaleString(),
            isShow:true
        }
    });

    var app3 = new Vue({
        el:'#app-3',
        data:{
            todos:[
                {text:'JavaScript',price:49},
                {text:'Jquery',price:50},
                {text:'Vue',price:51}
            ]
        }
    });

    var app4 = new Vue({
        el:'#app-4',
        data:{
            message:'Hello World Vue.js'
        },
        methods:{
            method:function(){
                this.message = this.message.split('').reverse().join('');
            }
        }
    });

    var app5 = new Vue({
        el:'#app-5',
        data:{
            msg:'Vue的双向绑定'
        }
    });

    var app6 = new Vue({
        el:'#app-6',
        data:{
            lis:[{
                text:'Vue',id:1
            },{
                text:'Angular',id:2
            },{
                text:'React',id:3
            }]
        }
    });
</script>

</body>
</html>